<form class="layui-form" action="" method="post" lay-filter="LAY-menu-form-edit">
    <script type="text/html" template lay-url="/admin/menu_auths/{{d.params.id}}"
            lay-done="layui.data.done(d);">

        <input type="hidden" name="id" value="{{d.result.id}}"/>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
                           lay-verify="required" value="{{d.result.name}}">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">上级菜单</label>
                <div class="layui-input-inline" id="LAY-system-menu-edit-parent-box">

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                    <select lay-verify="required" name="type">
                        {{# for (var i in d.params.typeMap) { }}
                        <option value="{{ i }}" {{# if (d.result.type === i) { }} selected {{# } }}>{{ d.params.typeMap[i] }}</option>
                        {{# } }}
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">权限</label>
                <div class="layui-input-inline">
                    <input type="text" name="authority" placeholder="请输入权限" value="{{d.result.authority || ''}}" autocomplete="off" class="layui-input" maxlength="30">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">跳转地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="href" value="{{d.result.href || ''}}"  placeholder="请输入跳转地址" autocomplete="off" class="layui-input"
                           maxlength="50">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon" value="{{d.result.icon || ''}}"  placeholder="首页菜单栏展示图标" autocomplete="off" class="layui-input"
                           maxlength="20">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="orders" value="{{d.result.orders || ''}}" placeholder="请输入排序" autocomplete="off" class="layui-input"
                           maxlength="9" lay-verify="order">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">设置</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="enabled" lay-skin="switch" lay-text="启用|禁用" {{ d.result.enabled ? 'checked' : '' }} value="true">
            </div>
            <div class="layui-input-inline">
                <input type="radio" name="showMenu" value="true" title="首页展示" {{ d.result.showMenu ? 'checked' : '' }}>
                <input type="radio" name="showMenu" value="false" title="首页不展示" {{ !d.result.showMenu ? 'checked' : '' }}>
            </div>
        </div>
    </script>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY-menu-form-update">立即提交</button>
        </div>
    </div>
</form>

<script type="text/html" id="LAY-system-menu-edit-parent-tpl">
    <select name="parentId">
        <option value=""></option>
        {{#
            layui.each(d.result, function(index, item){
        }}
            <option value="{{item.id}}" {{# if (item.id == formData.id) { }} disabled {{# } }} {{# if (formData.parentId && item.id == formData.parentId) { }} selected {{# } }}>{{ item.name }}</option>
        {{#
            });
        }}
    </select>
</script>

<script>
    layui.use(['admin', 'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , layer = layui.layer
            , response = setter.response
            , form = layui.form;

        //自定义验证规则
        form.verify({
            order: function(val) {
                if(val){
                    return /\d+/.test(val) ? '' : '只能输入数字'
                }
            }
        });

        form.on('submit(LAY-menu-form-update)', function (data) {
            admin.req({
                url: '/admin/menu_auths/'+data.field.id
                , type: 'put',
                contentType:"application/json"
                , traditional: true
                , data: JSON.stringify(data.field)
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] == statusCode.ok) {
                        layer.closeAll('page');  //关闭page的弹框
                        layer.msg('更新成功', {
                            icon: 1
                        });
                    }
                }
            });
            return false;
        });

    });

    var formData;
    layui.data.done = function (d) {
        layui.use(['form'], function () {
            var form = layui.form

            formData = d.result;

            layui.admin.req({
                url: "/admin/options?menu",
                dataType:"json",
                success:function(res) {
                    layui.laytpl(layui.$('#LAY-system-menu-edit-parent-tpl').html()).render(res, function(html){
                        layui.$("#LAY-system-menu-edit-parent-box").html(html);
                    });
                    form.render(null, 'LAY-menu-form-edit'); //渲染该模板下的动态表单
                }
            })
        });
    };
</script>
